<template>
  <div class="simple-directory-selector">
    <el-dialog
      v-model="visible"
      title="选择目录"
      width="500px"
    >
      <div class="content">
        <p>请输入或粘贴目录路径：</p>
        <el-input 
          v-model="inputPath" 
          placeholder="例如：C:/Users/Documents/实验报告"
          clearable
        />
        
        <div class="quick-paths">
          <p>快速选择：</p>
          <el-button 
            v-for="(path, index) in quickPaths" 
            :key="index"
            size="small"
            @click="selectQuickPath(path)"
          >
            {{ path.name }}
          </el-button>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'SimpleDirectorySelector',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    initialPath: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue', 'select', 'cancel'],
  setup(props, { emit }) {
    console.log('SimpleDirectorySelector setup, modelValue:', props.modelValue);
    
    const visible = ref(props.modelValue);
    const inputPath = ref(props.initialPath || '');
    
    // 快速路径选项
    const quickPaths = [
      { name: '用户目录', path: 'C:/Users' },
      { name: '桌面', path: 'C:/Users/Desktop' },
      { name: '文档', path: 'C:/Users/Documents' },
      { name: 'C盘', path: 'C:/' },
      { name: 'D盘', path: 'D:/' }
    ];
    
    // 监听 modelValue 变化
    watch(() => props.modelValue, (newValue) => {
      console.log('SimpleDirectorySelector: modelValue changed to', newValue);
      visible.value = newValue;
    });
    
    // 监听 visible 变化
    watch(visible, (newValue) => {
      console.log('SimpleDirectorySelector: visible changed to', newValue);
      emit('update:modelValue', newValue);
    });
    
    // 选择快速路径
    const selectQuickPath = (path) => {
      console.log('SimpleDirectorySelector: 选择快速路径', path);
      inputPath.value = path.path;
    };
    
    // 确认选择
    const handleConfirm = () => {
      console.log('SimpleDirectorySelector: 确认选择', inputPath.value);
      if (!inputPath.value) {
        ElMessage.warning('请输入目录路径');
        return;
      }
      
      emit('select', inputPath.value);
      visible.value = false;
    };
    
    // 取消选择
    const handleCancel = () => {
      console.log('SimpleDirectorySelector: 取消选择');
      emit('cancel');
      visible.value = false;
    };
    
    return {
      visible,
      inputPath,
      quickPaths,
      selectQuickPath,
      handleConfirm,
      handleCancel
    };
  }
}
</script>

<style scoped>
.simple-directory-selector {
  font-family: Arial, sans-serif;
}

.content {
  padding: 10px;
}

.quick-paths {
  margin-top: 20px;
}

.quick-paths p {
  margin-bottom: 10px;
}

.quick-paths .el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
